Sunshine - Responsive vCard Variant 2 Complete Documentation v2.2

Thank you very much for purchasing from LMPixels!

If you have any issue or question that this document does not cover, you can contact me via email mlinar73@gmail.com.

Template Installation
HTML Structure
CSS Files and Structure
Scripts
PHP Integration (Contact Form)
Fonts
Credits
Customization
Update Instructions

Template Installation

You can view this template in any web browser from your computer, mobile device. Because the files are written in HTML, you do not need an internet connection in order to display or edit the template.

All of the HTML files are given a descriptive name to make it easier to distingish what each file will display.

Upload to The Server

It's important to understand that you must either have your own server space or use someone elses. The server space can be purchased at many different places around the internet. You need somewhere to put the files that you purchased so others can find them online.
Select several files with the extension labeled .html. This is where all your content will. In addition to .html you should see a file labeled .css. .css files are going to be the files that will tell the .html how to to be styled. CSS is simply a way to take text, images, and other elements and change the look of them. It's very important to keep the .css file with the HTML or the HTML will not look how the design is meant to look. Along with the HTML and CSS files, you will also have three additional folders to upload: images, js and php.
Start your FTP client (I persoanlly use Filezila which is free) and login. Login to your server. You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.
Locate the domain folder you wish to upload your template files to on your server. You are going to want to click and drag every file that you have labeled .html, .css, .js, .php into your FTP client.
Once the files are done uploading, you can try access your website via browser.

HTML Structure

This site template has a Responsive and Mobile-Friendly layout based on Bootstrap Boilerplate.

HTML files

index.html - main HTML file of this site template.
The main structure of this site is wrapped in a 'subpages' div. Inside of that div you will find sections of the site.
blog-post-1.html - HTML file with Blog post page content.
The structure of this page is wrapped in '.blog-post-page' div.
portfolio-1.html - HTML file with Portfolio page content.

CSS Files and Structure

I'm using one main CSS file (style.css) in this template which you are free to modify depending on the customization you require.

If you would like to edit the color, font, or style of any elements, you would do the following in css/main.css :

If you would like to edit a specific section or page of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

There are also five additional style sheets that I do not recommend changing. Those style sheets reside in the 'css' folder. The 5 style sheets are:

bootstrap.css - A Beautiful Boilerplate for Responsive, Mobile-Friendly Development.
bootstrap.min.css - Minified version of bootstrap.css.
normalize.css - Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards.
transition-animations.css - CSS3 animation sets for subpages changer.
owl.carousel.css - The main stylesheet for Carousels (Testimonials block on About me subpage & Portfolio details page).
magnific-popup.css - The main stylesheet for styling the lightbox.
animate.css - CSS3 animation sets for portfolio content loading.

These files are included in the 'head' of index.html and blog-post-1.html:

Scripts

This template uses several scripts. If you're a developer, you will find this particularly useful.

jquery-2.1.3.min.js (version 2.1.3) - used by the various JS files as a library.
bootstrap.min.js - Bootstrap JS.
imagesloaded.pkgd.min.js - Detect when images have been loaded.
jquery.hoverdir.js - DirectionAwareHoverEffect.
jquery.shuffle.min.js - Categorize, sort, and filter a responsive grid of items.
jquery.magnific-popup.min.js - Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.
masonry.pkgd.min.js - Cascading grid layout library
modernizr.custom.js - Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser
owl.carousel.min.js - Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.
page-transition.js - Page transitions and ajax loaded pages.
validator.js - Contact form validator
main.js - jQuery Plugins Initialisation, mobile menu, page loading animation.
api.js - Google Recaptcha V2 script.

PHP Integration (Contact Form)

This template also use the PHP engine for activate the contact form.

For contact us data direct send to your email address you can edit your email address in /contact_form/contact_form.php file.

Additionally, the contact form uses anti-spam protection - Google Recaptcha V2. By default, the template uses global Google Recaptcha V2 keys with an average level of protection, if you want to use your keys, you can find out how to do it here.

Fonts

Arial, Helvetica, Sans-serif (both should be on your system as standard fonts)
Google Fonts Oswald, PT Sans.
Font Awesome Font Awesome version 4.7.0 (The complete set of 675 icons).
7 stroke icons font by Pixeden.

Credits

Images (Just on live preview, not included in download package):

Videos

https://vimeo.com/channels/staffpicks

1. Main photo

The image file stored in the 'image' folder, its name my_photo.jpg. Recommended size is 960 on 1050px (height 960px, width 1050px).

If you want to use a different file name:

Open index.html or blog-post-1.html.

Go to line with

<img src="images/my_photo.jpg" alt="image">

Change file name.
Save file.

2. Main title

Open index.html or blog-post-1.html.
Go to line with
```
<h1 class="site-title">Alex Smith</h1>
```
.
Change text.
Save file.

3. Subpage title

For example, the subpage "About me":

Open index.html.

Go to 'section' that you need edit. In our example is

<section class="pt-page pt-page-1" data-id="about_me">

Find 'div' with class="section-title-block".
Go to line with
```
<h2 class="section-title">About Me</h2>
```
Change text value.
Save file.

4. Adding new subpage

Open index.html.
Go to 'div' with class="subpages". Subpage is 'section' with HTML tags:
```
<section class="pt-page pt-page-1" data-id="about_me">
  <div class="section-title-block">
    <h2 class="section-title">About Me</h2>
    <h5 class="section-description">Artist, Thinker, Creative Doer</h5>
  </div>

  <div class="row">
    Our content...
  </div>
</section>
```
In my demo 5 sections:
1. About me <section class="pt-page pt-page-1" data-id="about_me">
2. Resume <section class="pt-page pt-page-2" data-id="resume">
3. Portfolio <section class="pt-page pt-page-3" data-id="portfolio">
4. Blog <section class="pt-page pt-page-4" data-id="blog">
5. Contact <section class="pt-page pt-page-5" data-id="contact">
As you can see in the sections change class="pt-page pt-page-" and attribute data-id. These values we need for the operation of the site navigation (main menu and the browser buttons "go back" and "go forward").
For example, add the section "Services". After existing sections do make a new one with class="pt-page pt-page-6" and data-id="services".

We get a section:

<section class="pt-page pt-page-6" data-id="services">
  <div class="section-title-block">
    <h2 class="section-title">Services</h2>
    <h5 class="section-description">What I Can Do</h5>
  </div>

  <div class="row">
    Our new content...
  </div>
</section>

Now we need to add a new item to the main menu. The main menu has the following structure:


<!-- Main menu -->
<ul id="nav" class="site-main-menu">
  <!-- About Me Subpage link -->
  <li<
    <a class="pt-trigger" href="#about_me" data-animation="58" data-goto="1">About me</a>>!-- href value = data-id without # of .pt-page -->
  </li>
  <!-- /About Me Subpage link -->
  <li>
    <a class="pt-trigger" href="#resume" data-animation="59" data-goto="2">Resume</a>
  </li>
  <li>
    <a class="pt-trigger" href="#portfolio" data-animation="60" data-goto="3">Portfolio</a>
  </li>
  <li>
    <a class="pt-trigger" href="#blog" data-animation="61" data-goto="4">Blog</a>
  </li>
  <li>
    <a class="pt-trigger" href="#contact" data-animation="58" data-goto="5">Contact</a>
  </li>
</ul>
<!-- /Main menu -->

Where data-animation="*" is the number of animation effect, data-goto is the number of 'section'. More details about the animation effects you can read here.

Add a new item:

<li>
  <a class="pt-trigger" href="#services" data-animation="59" data-goto="6">Services</a>
</li>

Save file.

5. Subpages animation effects

You can select any of the 67 variants of the animation. To do this, you need to specify the attribute 'data-animations' with the appropriate amount of animation for the respective menu item. Example:

<li>
  <a class="pt-trigger" href="#services" data-animation="59" data-goto="6">Services</a>
</li>

List of animation options:

1:
out effect: move to Left;
in effect: move from Right;

2:
out effect: move to Right;
in effect: move from Left;

3:
out effect: move to Top;
in effect: move from Bottom;

4:
out effect: move to Bottom;
in effect: move from Top;

5:
out effect: fade;
in effect: move from Right on top;

6:
out effect: fade;
in effect: move from Left on top;

7:
out effect: fade;
in effect: move from Bottom on top;

8:
out effect: fade;
in effect: move from Top on top;

9:
out effect: move to Left Fade;
in effect: move from Right Fade;

10:
out effect: move to Right Fade;
in effect: move from Left Fade;

11:
out effect: move to Top Fade;
in effect: move from Bottom Fade;

12:
out effect: move to Bottom Fade;
in effect: move from Top Fade;

13:
out effect: move to Left Easing on top;
in effect: move from Right;

14:
out effect: move to Right Easing on top;
in effect: move from Left;

15:
out effect: move to Top Easing on top;
in effect: move from Bottom;

16:
out effect: move to Bottom Easing on top;
in effect: move from Top;

17:
out effect: scale Down;
in effect: move from Right on top;

18:
out effect: scale Down;
in effect: move from Left on top;

19:
out effect: scale Down;
in effect: move from Bottom on top;

20:
out effect: scale Down;
in effect: move from Top on top;

21:
out effect: scale Down;
in effect: scale Up Down delay300;

22:
out effect: scale Down Up;
in effect: scale Up delay300;

23:
out effect: move to Left on top;
in effect: scale Up;

24:
out effect: move to Right on top;
in effect: scale Up;

25:
out effect: move to Top on top;
in effect: scale Up;

26:
out effect: move to Bottom on top;
in effect: scale Up;

27:
out effect: scale Down Center;
in effect: scale Up Center delay400;

28:
out effect: rotate Right Side First;
in effect: move from Right delay200 on top;

29:
out effect: rotate Left Side First;
in effect: move from Left delay200 on top;

30:
out effect: rotate Top Side First;
in effect: move from Top delay200 on top;

31:
out effect: rotate Bottom Side First;
in effect: move from Bottom delay200 on top;

32:
out effect: flip Out Right;
in effect: flip In Left delay500;

33:
out effect: flip Out Left;
in effect: flip In Right delay500;

34:
out effect: flip Out Top;
in effect: flip In Bottom delay500;

35:
out effect: flip Out Bottom;
in effect: flip In Top delay500;

36:
out effect: rotate Fall on top;
in effect: scale Up;

37:
out effect: rotate Out Newspaper;
in effect: rotate In Newspaper delay500;

38:
out effect: rotate Push Left;
in effect: move from Right;

39:
out effect: rotate Push Right;
in effect: move from Left;

40:
out effect: rotate Push Top;
in effect: move from Bottom;

41:
out effect: rotate Push Bottom;
in effect: move from Top;

42:
out effect: rotate Push Left;
in effect: rotate Pull Right delay180;

43:
out effect: rotate Push Right;
in effect: rotate Pull Left delay180;

44:
out effect: rotate Push Top;
in effect: rotate Pull Bottom delay180;

45:
out effect: rotate Push Bottom;
in effect: rotate Pull Top delay180;

46:
out effect: rotate Fold Left;
in effect: move from Right Fade;

47:
out effect: rotate Fold Right;
in effect: move from Left Fade;

48:
out effect: rotate Fold Top;
in effect: move from Bottom Fade;

49:
out effect: rotate Fold Bottom;
in effect: move from Top Fade;

50:
out effect: move to Right Fade;
in effect: rotate Unfold Left;

51:
out effect: move to Left Fade;
in effect: rotate Unfold Right;

52:
out effect: move to Bottom Fade;
in effect: rotate Unfold Top;

53:
out effect: move to Top Fade;
in effect: rotate Unfold Bottom;

54:
out effect: rotate Room Left Out on top;
in effect: rotate Room Left In;

55:
out effect: rotate Room Right Out on top;
in effect: rotate Room Right In;

56:
out effect: rotate Room Top Out on top;
in effect: rotate Room Top In;

57:
out effect: rotate Room Bottom Out on top;
in effect: rotate Room Bottom In;

58:
out effect: rotate Cube Left Out on top;
in effect: rotate Cube Left In;

59:
out effect: rotate Cube Right Out on top;
in effect: rotate Cube Right In;

60:
out effect: rotate Cube Top Out on top;
in effect: rotate Cube Top In;

61:
out effect: rotate Cube Bottom Out on top;
in effect: rotate Cube Bottom In;

62:
out effect: rotate Carousel Left Out on top;
in effect: rotate Carousel Left In;

63:
out effect: rotate Carousel Right Out on top;
in effect: rotate CarouselRight In;

64:
out effect: rotate Carousel Top Out on top;
in effect: rotate Carousel Top In;

65:
out effect: rotate Carousel Bottom Out on top;
in effect: rotate Carousel Bottom In;

66:
out effect: rotate Sides Out;
in effect: rotate Sides In delay200;

67:
out effect: rotate Slide Out;
in effect: rotate Slide In;

6. Edit about me subpage

6.1. Services

Open index.html file.
Find 'div' with 'class="service-block"
Edit text
Enter the name of the image.
If you want to use an icon instead of the image:
1. Go to div with class="service-info"
2. Replace this:
```
<img src="images/service/ecommerce.png" alt="E-Commerce">
```
  With this (7 stroke icons font by Pixeden. The complete set of 202 icons. Full icons list. ):
```
<i class="service-icon pe-7s-icon pe-7s-cart"></i>
```
  or this (Font Awesome: The complete set of 675 icons. Full icons list. ):
```
<i class="service-icon fa fa-shopping-cart"></i>
```
Save file.

6.2. Fun facts

By analogy with the "Services" block.

7. Edit resume subpage

7.1. Skills

Skill block:

<h4>Web Design</h4>
<div class="skill-container">
  <div class="skill-percentage skill-1"></div>
</div>

The value for the <div class="skill-percentage skill-1"> set in the css/main.css file:

/*Skill 1*/
.skill-percentage.skill-1 {
  width: 88%;
}

8. Edit portfolio subpage

The structure of the "Portfolio" subpage:

<!-- Portfolio Content -->
<div class="portfolio-content">
              
  <!-- Portfolio filter -->
  <ul id="portfolio_filters" class="portfolio-filters">
    <li class="active">
      <a class="filter btn btn-sm btn-link active" data-group="all">All</a>
    </li>
    ...
  </ul>
  <!-- End of Portfolio filter -->

  <!-- Portfolio Grid -->
  <div id="portfolio_grid" class="portfolio-grid portfolio-masonry masonry-grid-3">

    <!-- Portfolio Item 1 -->
    <figure class="item" data-groups='["all", "photography"]'>
        <a class="ajax-page-load" href="portfolio-1.html">
            <img src="images/portfolio/1.jpg" alt="">
            <div>
                <h5 class="name">Project Name</h5>
                <small>Photography</small>
                <i class="fa fa-long-arrow-right"></i>
            </div>
        </a>
    </figure>
    <!-- /Portfolio Item 1 -->

    ...
    
  </div>
  <!-- /Portfolio Grid -->

</div>
<!-- /Portfolio Content -->

Each item in the portfolio grid should be wrapped in the HTML tag <figure>...</figure>

You can add two types of content:

Page loaded via Ajax (page containing the image, carousel, video, etc., and a full description). portfolio-1.html a file content.
Content displayed via LightBox (Full image or video and caption).

8.1. Portfolio details page loaded via Ajax

Link will have a class of "ajax-page-load" and the href attribute with a path to the HTML page (portfolio-1.html etc.):

<!-- Portfolio Item 1 -->
<figure class="item" data-groups='["all", "photography"]'>
  <a class="ajax-page-load" href="portfolio-1.html">
    <img src="images/portfolio/1.jpg" alt="">
    <div>
      <h5 class="name">Project Name</h5>
      <small>Photography</small>
      <i class="fa fa-long-arrow-right"></i>
    </div>
  </a>
</figure>
<!-- /Portfolio Item 1 -->

Note : To test this Ajax loading you need to place the HTML files on a web server. You can set up a local web server on your PC by installing WampServer or XAMPP. You must open the portfolio page (example portfolio-1.html) file using "http://" since Ajax makes HTTP requests.

Ajax request can be made only to the files that exist on the same web server that servers the page from which the Ajax request is sent, not to external or remote servers for security reasons. This is called same-origin policy.

8.2. Content displayed via LightBox

To display the image link will have a class of "lightbox" and the href attribute with a path to the image:

<!-- Portfolio Item 3 -->
<figure class="item" data-groups='["all","webdesign"]'>
  <a href="images/portfolio/3.jpg" class="lightbox" title="Duis eu Eros Viverra">
    <img src="images/portfolio/3.jpg" alt="">
    <div>
      <h5 class="name">Project Name</h5>
      <small>Web Design</small>
      <i class="fa fa-image"></i>
    </div>
  </a>
</figure>
<!-- /Portfolio Item 3 -->

To display the video link will have a classes of "lightbox mfp-iframe" and the href attribute with a URL to the video:

<!-- Portfolio Item 2 -->
<figure class="item" data-groups='["all", "video"]'>
  <a href="https://player.vimeo.com/video/97102654?autoplay=1" title="Lihtbox Title" class="lightbox mfp-iframe">
    <img src="images/portfolio/2.jpg" alt="">
    <div>
      <h5 class="name">Project Name</h5>
      <small>Video</small>
      <i class="fa fa-video-camera"></i>
    </div>
  </a>
</figure>
<!-- /Portfolio Item 2 -->

9. Google Recaptcha V2 options

By default, the template uses global Google Recaptcha V2 keys, if you want to use your keys, then you can create new keys here.

1. Replace site key in the index.html:

2. Replace Site secret key in the contact_form/contact_form.php:

Update Instructions

Adding new features to the template.

v2.1. Adding the support of Google Recaptcha v2.

1. Changes in the index.html file:

Connect script Google recaptcha. Add this line:

    <script src='https://www.google.com/recaptcha/api.js'></script>

Immediately after this line:

<script src="js/modernizr.custom.js"></script>

Add the block with the captcha in the contact form:

    <div class="g-recaptcha" data-sitekey="6LdqmCAUAAAAAMMNEZvn6g4W5e0or2sZmAVpxVqI" data-callback="correctCaptcha"></div>

Immediately before this line:

<input type="submit" class="button btn-send" value="Send message">

2. Changes in the js/main.js file:

Replace this lines:

if (messageAlert && messageText) {
    $('#contact-form').find('.messages').html(alertBox);
    $('#contact-form')[0].reset();
}

With this lines:

if (messageAlert && messageText) {
    $('#contact-form').find('.messages').html(alertBox);
    if (messageAlert == "alert-success") {
        $('#contact-form')[0].reset();
    }
}

3. Changes in the contact/contact.php file:

Replace the entire file.

4. Changes in the css/main.css

Add these lines to the end of the file:

/* ============================================================================= 
12. Updates
============================================================================= */
/* v2.1 - 9 may 2017 */
.g-recaptcha {
  margin-bottom: 20px;
}

v2.2. Minor improvements.

You can simply replace the updated files if you have not made custom changes to them. If you made custom changes, then below is detailed instructions for updating.

1. Changes in the css/main.css file:

Add these lines to the end of the file:

/* v2.2 - 14 June 2019 */
.pt-page {
  opacity: 1;
}

Save changes

2. Changes in the js/main.js file:

Find this code:

// Initialize Portfolio grid
var $portfolio_container = $("#portfolio-grid");

$portfolio_container.imagesLoaded(function () {
    setTimeout(function(){
        portfolio_init(this);
    }, 500);
});

Replace it with this code:

// Initialize Portfolio grid
var $portfolio_container = $(".portfolio-grid");

$portfolio_container.imagesLoaded(function () {
    portfolio_init(this);
});

Find this code:

 // Blog grid init
setTimeout(function(){
    var $container = $(".blog-masonry");
    $container.masonry();
}, 500);

Replace it with this code:

// Blog grid init
var $container = $(".blog-masonry");
$container.imagesLoaded(function(){
    $container.masonry();
});

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template.

Sunshine - Responsive vCard Template Variant 2 v2.2

Complete Documentation

Thank you very much for purchasing from LMPixels!

Table of Contents

Template Installation

Upload to The Server

HTML Structure

HTML files

CSS Files and Structure

Scripts

PHP Integration (Contact Form)

Fonts

Credits

Customization

1. Main photo

2. Main title

3. Subpage title

4. Adding new subpage

5. Subpages animation effects

6. Edit about me subpage

6.1. Services

6.2. Fun facts

7. Edit resume subpage

7.1. Skills

8. Edit portfolio subpage

8.1. Portfolio details page loaded via Ajax

8.2. Content displayed via LightBox

9. Google Recaptcha V2 options

Update Instructions

v2.1. Adding the support of Google Recaptcha v2.

1. Changes in the index.html file:

2. Changes in the js/main.js file:

3. Changes in the contact/contact.php file:

4. Changes in the css/main.css

v2.2. Minor improvements.

1. Changes in the css/main.css file:

2. Changes in the js/main.js file: